<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      :title="musicInfo.title"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <view style="padding: 0 20rpx;height: 80vh;overflow: hidden;overflow-y: scroll;">
      <view class="auther">歌手：{{ musicInfo.auther }}</view>
      <view class="auther">类型：{{ musicInfo.type }}</view>
      <view class="auther">音乐风格：{{ musicInfo.style }}</view>
      <view class="auther">推荐理由：{{ musicInfo.reason }}</view>
      <view class="auther">情绪场景：{{ musicInfo.emotion }}</view>
      <view
        hover-class="none"
        hover-stop-propagation="false"
      >
        <u-parse :html="content"></u-parse>
      </view>
    </view>
    
    <view class="radio">
      <image
        class="img"
        :src="baseUrl + musicInfo.cover"
      ></image>
      <image
        @click="play"
        v-if="!isStart"
        class="img"
        src="/static/images/播放.png"
      ></image>
      <image
        @click="pause"
        v-if="isStart"
        class="img"
        src="/static/images/暂停.png"
      ></image>
    </view>
  </view>
</template>

<script>
import { getMusic } from "../../api/system/api";
export default {
  data() {
    return {
      content: "",
      musicId: "",
      baseUrl: "http://127.0.0.1:3000/",
      musicInfo: {},
      isStart: false,
      music: {},
      duration: "",
    };
  },
  onUnload() {
    this.pause()
  },
  onLoad(option) {
    let musicId = option.music;
    this.musicId = Number(musicId);
    getMusic({
      id: Number(musicId),
    }).then((res) => {
      if (res.code == 200 && res.data.data) {
        this.content = res.data.data[0].desc;
        this.musicInfo = res.data.data[0];
        this.musicInfo.file = JSON.parse(this.musicInfo.file);
        console.log(this.musicInfo)
      }
    });
    this.music = uni.createInnerAudioContext();
  },
  methods: {
    // 播放
    play() {
      this.isStart = true;
      this.music.src = `${this.baseUrl}${this.musicInfo.file.imgName}`;
      this.music.play();
    },
    //暂停
    pause() {
      this.isStart = false;
      this.music.pause();
      clearInterval(this.timer);
    },
    formatTime(value) {
      let minute = parseInt(value / 60);
      let second = parseInt(value % 60);
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return minute + ":" + second;
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fff3f3;
}

.title {
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
  font-weight: bold;
  color: #333;
}
.subtitle {
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
  color: #666;
}
.auther {
  width: 100%;
  text-align: left;
  margin-top: 10rpx;
  color: #333;
}
.aligntime {
  width: 100%;
  text-align: right;
  margin-top: 10rpx;
  color: #333;
}
.radio {
  position: fixed;
  width: 100%;
  height: 10vh;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  .img {
    width: 6vh;
    height: 6vh;
  }
}
</style>
